<template>
    <div class="innerText">
          <el-card class="box-card">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8150/user/uploadAvator.do"
              :show-file-list="false"
              :data="avForm"
              name="picture"
              :with-credentials="true"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
              
             <el-divider>头像</el-divider>
             <!-- 个人资料栏 -->
             <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="昵称：">
                  <el-input v-model="form.userName"></el-input>
                </el-form-item>

                <el-form-item label="出生日期">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.bornTime" style="width: 100%;"></el-date-picker>
                  </el-col>
                </el-form-item>

                <el-form-item label="登录邮箱">
                  <el-input type="email" v-model="form.email" disabled></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                  <el-input type="text" v-model="form.phone" ></el-input>
                </el-form-item>

                <el-form-item label="性别：">
                  <el-radio-group v-model="form.sex">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                    <el-radio label="未知"></el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="个人说明">
                  <el-input type="textarea" v-model="form.descri"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="keepData()">保存资料</el-button>
                  <el-button type="primary"><router-link to="/changepass">修改密码</router-link></el-button>
                </el-form-item>

              </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
 data() {
    return {
      imageUrl: '',
      type: [],
      form : {
          userName: '',
          bornTime: '',
          email: '',
          phone:'',
          sex: '',
          descri: ''
        },
        avForm:{
          email:'',
        }
    }
  },
  created(){
    this.getData();
  },

  methods: {
    // 上传成功回调
    handleAvatarSuccess(res, file) {
      // this.imageUrl = res.data.url
      // console.log(res.status);
      if(res.status=='success'){
        this.$message.success("头像上传成功！");
        // this.imageUrl = 
        this.imageUrl = URL.createObjectURL(file.raw);
        this.imageUrl = res.imgUrl;
        console.log(res.imgUrl);
        // console.log(this.imageUrl);
      }else{
        this.$message.error("头像上传失败");
      }
    },
    // 上传前格式和图片大小限制
    beforeAvatarUpload(file) {
      const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!type) {
        this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return type && isLt5M
    },
    // 保存资料
    keepData(){
      console.log(this.$refs.form);
      this.$refs.form.validate(async valid => {
        if(!valid) return;
        if (this.form.userName!=''  && this.form.phone!=''&& this.form.bronTimeStr!=''&& this.form.sex!='') {
            console.log("form:"+this.form);
     // 向服务器请求数据
          const {data:res} = await this.$axios.post("user/keepPersonalData.do",this.form)//访问后台
          console.log(res);
          if(res.status=='success'){
            this.$message.success('个人资料保存成功！');
          }else{
            this.$message.error('个人资料保存失败，请重试！');
          }
        }
      });
    }, 
    async  getData(){
        if (window.sessionStorage.getItem("user")!="" && window.sessionStorage.getItem("user")!= undefined) {
          const s =window.sessionStorage.getItem("user");
          // 向服务器请求数据
          const {data:res} = await this.$axios.get("user/getPersonalData.do?email="+s)//访问后台
          // 将请求的数据封装个到form表单
          this.form.userName = res.userName;
          this.form.bornTime = res.bronTimeStr;
          this.form.email = window.sessionStorage.getItem("user");
          this.form.phone = res.phone;
          this.form.sex = res.sex;
          this.form.descri = res.descri;
          this.imageUrl = res.avatorUrl;
          this.avForm.email=window.sessionStorage.getItem("user");
          // console.log(this.imageUrl);
        }
    },
  }
}
</script>

<style lang="less" scoped>
.innerText{
    background-color: rgb(4, 61, 78);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    // align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    .box-card {
        margin-top: 0.5rem;
        width:100%;
  }
}
// 暂时无用
.avatar-uploader{
  width: 120PX;
  height: 120px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  margin: 0% auto;
  overflow: hidden;
  // background: url('../../assets/logo/liao.png') no-repeat;
  // background-color: aquamarine;
  border: 1px solid rgb(221, 221, 221);
  background-size: 100% 100%;
}
.avatar-uploader-icon{
  font-size: 0;
  color: rgb(85, 78, 78);
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar-uploader-icon:hover{
  font-size: 28px;
  background: url("../../assets/bigIcon/shangchuantouxiang.png") no-repeat;
  background-size: 100% auto;
  background-position-y: 100%;
}
.avatar {
  position: relative;
  width: 120px;
  height: 120px;
  display: block;
}
</style>